<template>
  <div>
    <el-table
      :data="tableData"
      stripe
      height="980"
      style="width: 100%"
      empty-text="没有查到数据"
      v-loading="loading"
    >
      <el-table-column label="商品图片" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.picture" width="40%" />
        </template>
      </el-table-column>
      <el-table-column prop="goodsName" label="商品名" align="center">
      </el-table-column>
      <el-table-column prop="price" label="价格" align="center">
      </el-table-column>
      <el-table-column prop="inventory" label="库存" align="center">
      </el-table-column>
      <el-table-column prop="pageViews" label="销量" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-search"
            circle
            type="success"
            @click="goodsDetailed(scope.row.id)"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="updateGoods(scope.row.name)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="deleteById(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="size"
        :page-size="9"
        @current-change="currentChange"
        :current-page="$store.getters.getUserGoodsCurrent"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { userGoodsList, deleteById } from "@/api/productApi";
export default {
  data() {
    return {
      tableData: [],
      loading: true,
      size : 0
    };
  },
  created() {
    this.getData();
  },
  methods: {
    currentChange(page){
      this.$store.commit("setUserGoodsCurrent",page)
      this.getData()
    },
    deleteById(id) {
      let _self = this;
      let length = this.tableData.length
      this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteById(id)
            .then((res) => {
              if (res.code == 0) {
                _self.$message.success("删除成功");
                if(length == 1 && this.$store.getters.getUserGoodsCurrent > 1){
                  this.$store.commit("setUserGoodsCurrent",this.$store.getters.getUserGoodsCurrent - 1)
                }
                _self.getData();
              } else {
                _self.$message.error(res.message);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    goodsDetailed(id) {
      this.$router.push({
        path: `/home/goods_detailed/${id}`,
      });
    },
    updateGoods(name) {
      this.$router.push({
        name: "release_or_update",
        params: { name },
      });
    },
    getData() {
      userGoodsList(this.$store.getters.getUserGoodsCurrent)
        .then((res) => {
          if (res.code == 0) {
            this.tableData = res.data.goodsList;
            this.size = res.data.size
            this.loading = false
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.pagination {
  margin: 2% 0 0 55%;
}
</style>